<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            首先画出直角三角形部分 
            设置宽和高为0，上下左右 选择相邻的两条，设置高度和颜色，就可以画出直角三角形
        */
        .curvedArrowUp {
            width: 0;
            height: 0;
            border-top: 9px solid greenyellow;
            border-left: 9px solid transparent;
        }


        /* 
            实现弯曲部分：
            在实现这一部分时，使用 border 和 border-radius 先画一个扇形，再设置圆弧对应的一条边（假如左下角设置成扇形，设置border-bottom或border-left的属性来控制弯曲部分的头尾），最后把 border 属性删除或隐藏，就能实现 div 的弯曲效果
        */
        .curvedArrowUp {
            width: 10px;
            height: 10px;
            border: 1px solid red;
            border-radius: 0px 0px 0px 10px;
            border-bottom: 3px solid greenyellow;
            /* border-left: 3px solid greenyellow; */
        }


        .curvedArrowUp {
            position: relative;
            width: 0;
            height: 0;
            display: inline-block;
            border-top: 9px solid greenyellow;
            border-left: 9px solid transparent;
            transform: rotate(-15deg);
        }

        .curvedArrowUp:after {
            position: absolute;
            content: '';
            border: 0px solid transparent;
            border-bottom: 3px solid greenyellow;
            border-radius: 0px 0 0 20px;
            top: -13px;
            left: -18px;
            width: 12px;
            height: 12px;
            transform: rotate(-45deg);
        }

        .curvedArrowDw {
            position: relative;
            width: 0;
            height: 0;
            display: inline-block;
            border-top: 9px solid transparent;
            border-right: 9px solid red;
            transform: rotate(15deg);
        }

        .curvedArrowDw:after {
            position: absolute;
            content: '';
            border: 0 solid transparent;
            border-right: 3px solid red;
            border-radius: 0 20px 0 0;
            top: -10px;
            left: -11px;
            width: 12px;
            height: 12px;
            transform: rotate(-45deg);
        }
    </style>
</head>

<body>
    <div class="curvedArrowUp"></div>
    <div class="curvedArrowDw"></div>
</body>

<!-- 
    实现完全箭头分两部分：
     在div内实现直角三角形，旋转调整角度（也可在整理完成再旋转）
     使用伪元素实现弯曲部分效果，进行旋转
 -->

</html>